<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>座位安置-PC(商家端)</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/weui.min.css">
</head>
<body>
<div class="book-ctx" v-cloak>
    <ul class="seat-type-ctl">
        <li v-for="(item, index) in seatType" :class="item.ispick ? 'cur' : ''" @click="changeSeatType"
            :data-index="index">
            <span>{{ item.name }}</span>
            <span :class="item.type"></span>
        </li>
        <div class="clear"></div>
    </ul>
    <div class="line-input">
        <span>请输入行列数（模拟场地面积）：</span>
        <span>
            <input type="number" placeholder="行数" class="row" :value="row === 0 ? '' : row" @change="lineChange">
            <span class="x-icon">×</span>
            <input type="number" placeholder="列数" class="col" :value="col === 0 ? '' : col" @change="lineChange">
        </span>
    </div>
    <div class="seat-list" v-if="row!==0&&col!==0">
        <div v-for="(item1, index1) in row" class="row-line">
            <div v-for="(item2, index2) in col"
                 :class="['col-line', seatRect[index1+','+index2] && seatRect[index1+','+index2].ispick ? 'picked ' + seatRect[index1+','+index2].tableType : '', seatRect[index1+','+index2] && seatRect[index1+','+index2].ishover ? 'hover ' + curSeatType : '']"
                 :data-index="index1+','+index2" @mouseover="hoverShow(index1+','+index2, $event, 'hover')"
                 :data-table = "seatRect[index1+','+index2] ? seatRect[index1+','+index2].tableIndex : ''"
                 @mouseout="hoverHide(index1+','+index2, $event, 'hover')"
                 @click="hoverShow(index1+','+index2, $event, 'click')">
            </div>
        </div>
        <ul class="ctl-btn">
            <li>
                <button @click="cleanAll">清空</button>
            </li>
            <li>
                <button @click="getTableInfo">保存</button>
            </li>
        </ul>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>